<template>
	<div class="hello">
		<p>{{ msg }}</p>
		<div @click="parent1">去父级1</div>
		<el-button @click="detailed">默认按钮</el-button>
		<el-button type="primary">主要按钮</el-button>
		<el-button type="text">文字按钮</el-button>
		<p>1、布局 分为24份 el-row > el-col</p>
		<p>2、复杂布局 :gutter="20"为一个整体 ,子级为24份 , 偏移:offset="6"</p>
		<p>3、响应尺寸：:xs="8" :sm="6" :md="4" :lg="3" :xl="1"</p>
		<p>布局容器 el-container el-header：顶栏容器。el-aside：侧边栏容器。el-main：主要区域容器。el-footer：底栏容器。</p>
		<el-row>
			<el-col :span="24">
				<div>24</div>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="6">
				<div class="grid-content bg-purple">1</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-purple">2</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-purple">3</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-purple">4</div>
			</el-col>
		</el-row>
		<el-container>
			<el-header>
				<div>上</div>
			</el-header>
			<el-container>
				<el-aside width="200px">Aside</el-aside>
				<el-container>
					<el-main>Main</el-main>
					<el-footer>Footer</el-footer>
				</el-container>
			</el-container>
		</el-container>
		<i class="el-icon-close"></i>
		<p>medium、small、mini，通过设置size</p>
		<div>
			<el-button type="primary" :loading="true" disabled size="medium">主要按钮</el-button>
		</div>
		<div style="margin: 20px 0">
			<el-button type="primary" size="small" plain icon="el-icon-edit">主要按钮</el-button>
		</div>
		<div>
			<el-button-group>
				<el-button type="primary" size="mini" round>主要按钮</el-button>
				<el-button type="primary"  round disabled icon="el-icon-edit">主要按钮</el-button>
			</el-button-group>
		</div>
		<div>
			<el-button type="text" @click="ddd">文字按钮</el-button>
			
		</div>
		性别：
		<el-radio v-model="sex" label="0" @change="radioOne">男</el-radio>
  		<el-radio v-model="sex" label="1" >女</el-radio>
  		<p id="aaa" @click="radioTwo">1111</p>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				sex: '0'
			}
		},
		methods: {
			detailed: function(e) {
				this.$http.post('/login', {

				}, {
					emulateJSON: true
				}).then(function(e) {
					console.log("111");
				}, function(res) {
					console.log("2222");
				});
			},
			radioOne: function(e) {
				console.log("选中");
			},
			radioTwo: function(e) {
				console.log($("#aaa").text());
				console.log(this.sex);
			},
			ddd: function(e) {
				console.log(e.currentTarget.innerText);
			},
			parent1: function(e) {
				this.$router.push({
					path: '/parent1'
				});
			}
		},
	}
</script>
<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}
	
	ul {
		list-style-type: none;
		padding: 0;
	}
	
	li {
		display: inline-block;
		margin: 0 10px;
	}
	
	a {
		color: #42b983;
	}
</style>